<template>
  <div class="main-content-container">
    <!-- 药品-分类 -->
    <div ref="search" class="app-search">
      <el-row>
        <!-- <el-col :span="4">
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-col> -->
        <el-col :span="24" align="left" class="addBtnStyle">
          <el-button @click="addSortBtn">+增加分类</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="box-show marginTop" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table v-loading="loading" :data="tableData" border :height="innerHeight" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <!-- <el-table-column width="80" /> -->
        <el-table-column prop="no" label="编号" :show-overflow-tooltip="true" />
        <el-table-column prop="status" label="状态" :show-overflow-tooltip="true" />
        <el-table-column prop="dataName" label="名称" :show-overflow-tooltip="true" />
        <el-table-column prop="address" label="操作" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-button type="text" @click="addSonSortBtn(scope.row)">增加子分类</el-button>
            <el-button type="text" @click="editSortBtn(scope.row)">编辑</el-button>
            <el-button type="text" @click="delectSortBtn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <AddProduct ref="addProduct" :show.sync="show" @submitForm="submitForm" />
  </div>
</template>
<script>
import { labelHeigh } from '@/utils/common.js';
import AddProduct from './addProduct.vue';
export default {
  components: {
    AddProduct,
  },
  data() {
    return {
      requestInfo: {},
      tableData: [],
      options: [],
      total: 0,
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      // tableColor,
      innerHeight: null,
      value: '',
      show: false,
      flag: true,
      loading: false,
    };
  },
  mounted() {
    this.getSortList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async getSortList() {
      this.loading = true;
      const res = await this.$api['data/projects/pageType']({ ...this.params, query: { dataType: '项目类' }});
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询分类列表失败！');
      this.tableData = res.data.result;
      this.total = res.data.total;
    },
    // 增加分类
    addSortBtn() {
      this.params = { dataLevel: 1, pid: 0 };
      this.$refs.addProduct.addBtn("增加分类");
      this.show = true;
      this.flag = true;
    },
    // 添加子分类
    addSonSortBtn(row) {
      this.params = { dataLevel: Number(row.dataLevel) + 1, pid: row.id };
      this.$refs.addProduct.addBtn("增加子分类");
      this.show = true;
      this.flag = true;
    },
    async submitForm(val) {
      if (this.flag) {
        const res = await this.$api['data/projects/addSortTree']({ ...val, ...this.params, dataType: '项目类' });
        if (res.code !== 200) return this.$message.error('新增分类失败！');
        this.$message.success('新增分类成功！');
      } else {
        const res = await this.$api['data/projects/editSortTree']({ ...val, ...this.params, dataType: '项目类' });
        console.log(res);
        if (res.code !== 200) return this.$message.error('编辑分类失败！');
        this.$message.success('编辑分类成功！');
      }
      this.getSortList();
    },
    // 编辑分类
    editSortBtn(row) {
      this.params = { dataLevel: row.dataLevel, id: row.id, pid: row.pid };
      this.$refs.addProduct.editBtn(JSON.parse(JSON.stringify(row)));
      this.show = true;
      this.flag = false;
    },
    // 删除分类
    async delectSortBtn(row) {
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      }
      const res = await this.$api['data/projects/deleteSortTree']({ id: row.id });
      if (res.code !== 200) return this.$message.error('删除分类失败！');
      this.$message.success('删除分类成功！');
      this.getSortList();
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getAddProjectList();
    },
  },
};
</script>
